<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><a href="{:url('demo/demo/lists')}">列表示例</a></el-breadcrumb-item>
                    <el-breadcrumb-item>{$title}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form :model="form" label-width="80px">
                <el-form-item label="上级菜单">
                    <div>
                        <div>
                            <el-select v-model="form.parent_access_id">
                                <el-option :value="0" label="一级菜单"></el-option>
                            </el-select>
                        </div>
                        <div class="form-small">
                            <small>上级菜单，菜单最多三级</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item prop="access_name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
                              label="名称">
                    <el-input v-model="form.access_name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <div v-if="form.banner" @click="show_select_image=true">
                        <el-image class="form-upload__image" :src="form.banner"></el-image>
                    </div>
                    <div v-else>
                        <el-button @click="show_select_image=true" type="primary">选择图片</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="排序">
                    <div>
                        <el-input v-model="form.sort" type="number"></el-input>
                        <div class="form-small">
                            <small>数值越小，约靠前</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="是否菜单">
                    <el-radio-group v-model="form.is_menu">
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="0">仅权限</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="富文本">
                    <div>
                        <ueditor :init="''" @update="richUpdateEvent"></ueditor>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitEvent" type="primary">
                        提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
    <select-image v-model:show="show_select_image" @confirm="selectImageConfirm"
                  @close="show_select_image=false"></select-image>
</div>
{hcmstag:include file="admin@/components/ueditor"}
<!--图片选择组件-->
{hcmstag:include file="admin@/components/upload/select-image"}
<script>
    const App = {
        data() {
            return {
                show_select_image: false,
                form: {
                    banner: '',
                    is_menu: 1,
                    sort: 100,
                    parent_access_id: 0,
                }
            }
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            selectImageConfirm(e) {
                console.log('selectImageConfirm', e)
                this.form.banner = e[0].file_url
            },
            richUpdateEvent(e) {
                console.log('richUpdateEvent', e)
            },
            /**
             * 获取编辑所需信息
             */
            getInfo() {
                // this.httpGet("{:url('admin/access/edit/info')}", {
                //     ...this.getUrlQuery()
                // }).then(res => {
                // })
            },
            /**
             * 提交信息
             */
            submitEvent() {
                // this.httpPost("{:url('admin/access/edit')}", {
                //     ...this.form,
                // }).then(res => {
                //     if (res.status) {
                //         this.$message.success(res.msg)
                //     }
                // })
            },
        }
    }
</script>

<style>
</style>
